<script lang="ts">
  export default {
    name: 'PoleCommentList',
  };
</script>

<script setup lang="ts">
  import { toRefs, computed } from 'vue';
  import { RadioGroup, Radio } from '@arco-design/web-vue';
  // import { queryPinCommentsList } from '/@/api/app/pin';
  import type { CommentRecord as _CommentRecord } from '/@/api/app/model/pinModel';
  import { isDef } from '/@/utils/is';
  import CommentItem from './CommentItem.vue';

  type CommentRecord = Partial<_CommentRecord>;
  interface commentListProps {
    data?: CommentRecord[];
    limit?: number;
    subLimit?: number;
    total?: number;
    showTitle?: boolean;
    actionWrapClass?: any;
    showToUser?: boolean;
    order?: number;
    showOrder?: boolean;
  }

  const props = withDefaults(defineProps<commentListProps>(), {
    data: () => {
      return [];
    },
    limit: 5,
    subLimit: 0,
    showTitle: true,
    showToUser: false,
    order: 0,
    showOrder: true,
  });
  const emit = defineEmits<{
    (event: 'view-all'): void;
    (event: 'view-user', item: CommentRecord): void;
    (event: 'view-to-user', item: CommentRecord): void;
    (
      event: 'comment',
      item: CommentRecord,
      comment?: string,
      file?: string,
      topComment?: CommentRecord,
    ): void;
    (event: 'change-order', item: number): void;
    (event: 'star', item: CommentRecord, cancel: boolean): void;
  }>();
  const { data } = toRefs(props);

  const getIsExceedLimit = computed(() => {
    return props.limit > 0 && props.data.length > props.limit;
  });

  const getData = computed(() => {
    return getIsExceedLimit.value ? props.data.slice(0, props.limit) : props.data;
  });

  const getTotal = computed(() => {
    return isDef(props.total) ? props.total : props.data.length;
  });

  const onClickViewAllComments = () => {
    emit('view-all');
  };

  const onViewUser = (item: CommentRecord) => {
    emit('view-user', item);
  };

  const onViewToUser = (item: CommentRecord) => {
    emit('view-to-user', item);
  };

  const onComment = (
    item: CommentRecord,
    comment?: string,
    file?: string,
    topComment?: CommentRecord,
  ) => {
    emit('comment', item, comment, file, topComment);
  };

  const onSubComment = (
    item: CommentRecord,
    comment?: string,
    file?: string,
    topComment?: CommentRecord,
    _topComment?: CommentRecord,
  ) => {
    emit('comment', item, comment, file, topComment || _topComment);
  };

  const onStar = (item: CommentRecord, cancel: boolean) => {
    emit('star', item, cancel);
  };

  // const reloadPinCommentList = async () => {};
  const onOrderChange = (value: number) => {
    emit('change-order', value);
  };
</script>

<template>
  <div v-if="data && data.length">
    <div v-if="props.showTitle" class="flex justify-between items-center">
      <div>全部评论（{{ getTotal }}）</div>
      <RadioGroup
        v-if="props.showOrder"
        class="space-x-[8px]"
        type="button"
        :model-value="props.order"
        @change="onOrderChange"
      >
        <Radio :value="0"> 最新 </Radio>
        <span class="text-[#e5e6eb]">|</span>
        <Radio :value="1"> 最热 </Radio>
      </RadioGroup>
    </div>
    <div class="">
      <CommentItem
        v-for="item in getData"
        :key="item.id"
        :data="item"
        :actionWrapClass="props.actionWrapClass"
        :showToUser="props.showToUser"
        @comment="onComment"
        @view-user="onViewUser"
        @view-to-user="onViewToUser"
        @star="onStar"
      >
        <template #sub-list>
          <div v-if="item.reply_list" class="bg-gray-100 rounded-[2px] mt-[12px] px-[12px]">
            <PoleCommentList
              :data="item.reply_list"
              :limit="props.subLimit"
              :showTitle="false"
              :showToUser="true"
              actionWrapClass="bg-white"
              @comment="(...args) => onSubComment(...args, item)"
              @star="onStar"
            />
          </div>
        </template>
      </CommentItem>
    </div>
    <div
      @click="onClickViewAllComments"
      v-if="getIsExceedLimit"
      class="w-full flex justify-center items-center pt-[10px] border-t-[1px] border-[#e5e6eb] cursor-pointer"
    >
      查看全部{{ getTotal }}条回复
    </div>
  </div>
</template>
